<script lang="ts" setup>
import { ref } from 'vue'
import { APP_NAVBAR_HEIGHT, APP_TABBAR_HEIGHT } from '@/constant/index'
import { useSafeAreaHooks } from '@/composables/useSafeArea'

const { top, bottom } = useSafeAreaHooks()

const bodyHeight = `calc(100vh - ${top}px - ${bottom}px - ${APP_TABBAR_HEIGHT}px - ${APP_NAVBAR_HEIGHT}px)`

const topTabs = ['关注', '发现']
const currentTab = ref(0)

interface Post {
  id: string
  imageUrl: string
  title: string
  username: string
  avatar: string
  likes: string
}
const posts = [
  {
    id: '1',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/c416150284e5d1b25dda6054645fe5bc.jpg',
    title: '周末探店｜这家店的下午茶太好拍了',
    username: '小红薯',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/cb0e59c94c9925477201791c5d748344.jpg',
    likes: '1.2w',
  },
  {
    id: '2',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/3aa85352e9f07a8c126d7c4da9e1ef90.jpg',
    title: '超级好吃的法式甜点推荐',
    username: '美食达人',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/ffbfba095d8a0ebdc0c8ca44457a4173.jpg',
    likes: '8.8k',
  },
  {
    id: '3',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f32856d5ca45cc18655bc1be820c8c3a.jpg',
    title: 'ins风格家居装修分享',
    username: '设计控',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/6405e9bb8cd6643afe0611b70fd70150.jpg',
    likes: '5.6k',
  },
  {
    id: '4',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/fa5ac539df9c8e8963a305680a5b41cc.jpg',
    title: '春季穿搭必备单品分享',
    username: '时尚博主',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/a328daee8c36bbb1cd5ec78c4f3c1d33.jpg',
    likes: '7.3k',
  },
  {
    id: '5',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/8f9d90e0dc4fed7935b65eb27251a1f3.jpg',
    title: '平价好用化妆品大推荐',
    username: '美妆达人',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/e268ac03435c881b21404d7400d0e579.jpg',
    likes: '6.9k',
  },
  {
    id: '6',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/abc70c31d2761ecf439df7408d25e668.jpg',
    title: '健康早餐打卡日记',
    username: '营养师小王',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/59d63f6fb1bf4a6378249467702760f2.jpg',
    likes: '4.5k',
  },
  {
    id: '7',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/d79b6f1c4e0db388ef43b03ebaada715.jpg',
    title: '打造温馨阅读角落',
    username: '生活家',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/cbe98f0d26049b3d0b84ddc4f1e46110.jpg',
    likes: '3.9k',
  },
  {
    id: '8',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/3c406d5ed0b0d3e50d0f115c80503add.jpg',
    title: '咖啡师的日常',
    username: '咖啡控',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/1e3a1dafe87606f48f726954ffb8906e.jpg',
    likes: '5.2k',
  },
  {
    id: '9',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/f4281b4f107059b42654bb8b13211284.jpg',
    title: '健身打卡第30天',
    username: '健身教练',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/16627b8e8dfd06add352e813f840aa7b.jpg',
    likes: '9.1k',
  },
  {
    id: '10',
    imageUrl: 'https://ai-public.mastergo.com/ai/img_res/32bbfa601f4c27a529d256bb97a20622.jpg',
    title: '手工陶艺教程',
    username: '艺术家',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/b8dedc20883fa3683658e7a8472f8e2f.jpg',
    likes: '4.7k',
  },
] as Post[]

function handlePostClick(post: Post) {
  uni.navigateTo({
    url: '/homePages/post/index',
    query: {
      id: post.id,
    },
  })
}
</script>

<template>
  <view
    class="container"
    :style="{ 'paddingTop': `${top}px`, '--body-height': bodyHeight }"
  >
    <!-- 顶部导航栏 -->
    <!-- <view
      class="top-navbar"
      :style="{ paddingTop: `${top}px` }"
    >
      <view class="tabs">
        <view
          v-for="(tab, index) in topTabs"
          :key="index"
          class="tab-item"
          :class="{ active: currentTopTab === index }"
          @tap="currentTopTab = index"
        >
          <text class="tab-text">
            {{ tab }}
          </text>
        </view>
      </view>
      <view class="search-icon">
        <wd-icon
          name="search"
          color="rgb(84 84 84)"
          size="18px"
        />
      </view>
    </view> -->
    <wd-tabs
      v-model="currentTab"
      swipeable
      animated
      custom-class="custom-tabs"
    >
      <block
        v-for="tab in topTabs"
        :key="tab"
      >
        <wd-tab :title="tab">
          <!-- 内容区域 -->
          <scroll-view
            class="content"
            scroll-y
          >
            <view class="waterfall">
              <view
                v-for="(item, index) in posts"
                :key="index"
                class="waterfall-item"
                @tap="handlePostClick(item)"
              >
                <view class="post-card">
                  <image
                    class="post-image"
                    :src="item.imageUrl"
                    mode="widthFix"
                  />
                  <view class="post-info">
                    <text class="post-title">
                      {{ item.title }}
                    </text>
                    <view class="user-info">
                      <image
                        class="avatar"
                        :src="item.avatar"
                        mode="aspectFill"
                      />
                      <text class="username">
                        {{ item.username }}
                      </text>
                      <view class="like-info">
                        <!-- <wd-icon name="heart" color="#FF2442" size="18px" /> -->
                        <text class="i-mdi-cards-heart-outline text-[12px] text-[13px] text-[#666]" />
                        <text class="like-count">
                          {{ item.likes }}
                        </text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;

  .custom-tabs {
    background: #f8f8f8;
  }
}

.top-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: relative;
  z-index: 99;
}

.tabs {
  display: flex;
}

.tabs .tab-item {
  margin-right: 60rpx;
  position: relative;
}

.tabs .tab-item .tab-text {
  font-size: 16px;
  color: #666;
}

.tabs .tab-item.active .tab-text {
  color: #333;
  font-weight: bold;
}

.tabs .tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -6rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 20rpx;
  height: 4rpx;
  background-color: #FF2442;
  border-radius: 2rpx;
}

.location {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
}

.city-name {
  font-size: 14px;
  color: #333;
  margin-right: 4rpx;
}

.search-icon {
  padding: 10rpx;
}

.content {
  flex: 1;
  overflow: auto;
  height: var(--body-height);
  background: #f8f8f8;
}

.waterfall {
  padding: 20rpx;
  column-count: 2;
  column-gap: 20rpx;
}

.waterfall-item {
  break-inside: avoid;
  margin-bottom: 20rpx;
}

.post-card {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.post-image {
  width: 100%;
  border-radius: 12rpx 12rpx 0 0;
}

.post-info {
  padding: 20rpx;
}

.post-title {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  margin-right: 12rpx;
}

.username {
  font-size: 12px;
  color: #666;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.like-info {
  display: flex;
  align-items: center;
}

.like-count {
  font-size: 12px;
  color: #999;
  margin-left: 4rpx;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100rpx;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  position: relative;
}

.tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item:nth-child(3) {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FF2442;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  box-shadow: 0 2px 8px rgba(255, 36, 66, 0.2);
}

.tab-item:nth-child(3) .uni-icons {
  color: #fff;
}

.tab-text {
  font-size: 32rpx;
  color: #666;
}

.tab-text.active {
  color: #FF2442;
  font-weight: bold;
}
</style>
